<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-steps :current="1">
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template slot="title">
          Finished
        </template>
        <span slot="description">This is a description.</span>
      </a-step>
      <a-step title="In Progress" description="This is a description." />
      <a-step title="Waiting" description="This is a description." />
    </a-steps>
  </a-modal>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getPermissions } from '@/api/manage'
import { actionToObject } from '@/utils/permissions'
import pick from 'lodash.pick'

@Component({
  name: 'RoleModal',
  components: {}
})
export default class RoleModal extends Vue {
  //data
  private labelCol: object = {
    xs: { span: 24 },
    sm: { span: 5 }
  }
  private wrapperCol: object = {
    xs: { span: 24 },
    sm: { span: 16 }
  }
  private visible: boolean = false
  private confirmLoading: boolean = false
  private mdl: any = {}
  private form: any
  private permissions: any[] = []

  constructor() {
    super()
  }

  beforeCreate() {
    this.form = this.$form.createForm(this)
  }

  created() {
    this.loadPermissions()
  }

  //methods
  add() {
    this.edit({ id: 0 })
  }
  edit(record: any) {
    this.mdl = Object.assign({}, record)
    this.visible = true

    // 有权限表，处理勾选
    if (this.mdl.permissions && this.permissions) {
      // 先处理要勾选的权限结构
      const permissionsAction: any = {}
      this.mdl.permissions.forEach((permission: any) => {
        permissionsAction[permission.permissionId] = permission.actionEntitySet.map((entity: any) => entity.action)
      })
      // 把权限表遍历一遍，设定要勾选的权限 action
      this.permissions.forEach((permission: any) => {
        permission.selected = permissionsAction[permission.id] || []
      })
    }

    this.$nextTick(() => {
      this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
    })
    console.log('this.mdl', this.mdl)
  }
  close() {
    this.$emit('close')
    this.visible = false
  }
  handleOk() {
    const _this = this
    // 触发表单验证
    this.form.validateFields((err: any, values: any) => {
      // 验证表单没错误
      if (!err) {
        console.log('form values', values)

        _this.confirmLoading = true
        // 模拟后端请求 2000 毫秒延迟
        new Promise(resolve => {
          setTimeout(() => resolve(), 2000)
        })
          .then(() => {
            // Do something
            _this.$message.success('保存成功')
            _this.$emit('ok')
          })
          .catch(() => {
            // Do something
          })
          .finally(() => {
            _this.confirmLoading = false
            _this.close()
          })
      }
    })
  }
  handleCancel() {
    this.close()
  }
  onChangeCheck(permission: any) {
    permission.indeterminate =
      !!permission.selected.length && permission.selected.length < permission.actionsOptions.length
    permission.checkedAll = permission.selected.length === permission.actionsOptions.length
  }
  onChangeCheckAll(e: any, permission: any) {
    Object.assign(permission, {
      selected: e.target.checked ? permission.actionsOptions.map((obj: any) => obj.value) : [],
      indeterminate: false,
      checkedAll: e.target.checked
    })
  }
  loadPermissions() {
    const that = this
    getPermissions(null).then((res: any) => {
      const result = res.result
      that.permissions = result.map((permission: any) => {
        const options = actionToObject(permission.actionData)
        permission.checkedAll = false
        permission.selected = []
        permission.indeterminate = false
        permission.actionsOptions = options.map((option: any) => {
          return {
            label: option.describe,
            value: option.action
          }
        })
        return permission
      })
    })
  }
}
</script>

<style scoped></style>
